<template>
  <edit-paper :data="editData" @editFinish="fetchPaperList" />
  <a-page-header title="试卷管理" sub-title="试卷管理" />
  <a-space>
    <a-button type="primary" @click="editPaper(-1)">添加试卷</a-button>
    <a-button type="primary" @click="goFirstPage">返回第一页</a-button>
    <a-input v-model:value="paperName" placeholder="请输入试卷名称" />
    <a-button type="primary" @click="fetchPaperList"> 刷新 </a-button>
  </a-space>
  <br /><br />
  <a-table
    :dataSource="paperList"
    :columns="columns"
    rowKey="id"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template #duration="{ record }">
      <a-tag color="green">{{ record.duration }}秒</a-tag>
    </template>
    <template #action="{ record }">
      <a @click="editPaper(record.id)">编辑</a>
      <a-divider type="vertical" />
      <a @click="$router.push({ name: 'QuestionManage', params: { paperId: record.id } })">题目管理</a>
      <a-divider type="vertical" />
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          更多操作
          <down-outlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleDeletePaper(record)"> 删除 </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-table>
</template>

<script>
import { defineComponent, ref, reactive, onMounted, createVNode } from "vue";
import { deletePaper, getAllPaper } from "../../utils/api";
import { DownOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import EditPaper from "../../components/admin/EditPaper.vue";

export default defineComponent({
  setup() {
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
      },
      {
        title: "试卷名称",
        dataIndex: "name",
      },
      {
        title: "试卷说明",
        dataIndex: "caption",
      },
      {
        title: "操作",
        slots: { customRender: "action" },
      },
    ];
    const paperList = ref([]);
    const paperName = ref("");
    const pagination = reactive({
      showTotal: (total) => `共有 ${total} 条数据`,
      total: 0,
      current: 1,
      pageSize: 0,
    });
    const loading = ref(false);
    const editData = reactive({
      visible: false,
      paperId: 0,
    });

    const handleDeletePaper = (record) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "删除试卷将导致其所有信息被删除"),
          createVNode("p", {}, `将删除名称为【${record.name}】的试卷,请确认`),
        ]),
        onOk() {
          deletePaper(record.id).then((res) => {
            message.success(res.data.message);
            fetchPaperList();
          });
        },
      });
    };
    const fetchPaperList = async () => {
      loading.value = true;
      let result = await getAllPaper(pagination.current, paperName.value);
      pagination.total = result.data.data.total;
      pagination.pageSize = result.data.data.size;
      paperList.value = result.data.data.records;
      loading.value = false;
    };
    const goFirstPage = () => {
      pagination.current = 1;
      fetchPaperList();
    };
    const handleTableChange = (pag) => {
      pagination.current = pag.current;
      fetchPaperList();
    };
    const editPaper = (id) => {
      editData.paperId = id;
      editData.visible = true;
    };

    onMounted(() => {
      fetchPaperList();
    });

    return {
      columns,
      paperList,
      paperName,
      pagination,
      loading,
      editData,
      editPaper,
      fetchPaperList,
      handleTableChange,
      goFirstPage,
      handleDeletePaper,
    };
  },
  components: {
    DownOutlined,
    EditPaper,
  },
});
</script>
